<template>
  <el-row style="width: 100%">
    <el-col>
      <el-menu
          class="menu"
          :default-active="activeIndex"
          mode="horizontal"
          @select="selectNewsList">
        <el-col v-for="item of newsTypeList">
          <el-menu-item :index="item.id">{{ item.newsTypeName }}</el-menu-item>
        </el-col>
        <el-col>
          <el-menu-item index="-1">MORE</el-menu-item>
        </el-col>
      </el-menu>
    </el-col>
    <el-col>
      <div class="table">
        <el-table
            :data="newsData"
            :cell-style="{
                  paddingTop: '5px',
                  paddingBottom: '0px',
                  padding: '15px 0',
                  border: ''}"
            :header-cell-style="{ border: '' }">
          <el-table-column>
            <template #default="{ row }">
              <span class="title" @click="toNewsDes(row.nid)">
                <img
                    class="title-img"
                    src="@/assets/home/矩形 2 拷贝 9.png"
                    alt=""/>
                {{ row.newsTitle }}
              </span>
            </template>
          </el-table-column>
          <el-table-column width="100px">
            <template #default="{ row }">
              <span class="time">{{ row.createdTime }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-col>
  </el-row>
</template>

<script>
/***
 * {新闻资讯}
 *
 * @author: 宋康
 * @date: 2023/1/30
 */
import {newsTypeListImmune, newListImmune} from '@/api/operations-center/news'

export default {
  name: 'HomeList',
  data() {
    return {
      activeIndex: "-1",
      newsTypeList: [],
      newsData: [],
    };
  },
  methods: {
    /**
     * {获取新闻分类}
     *
     * @author: 宋康
     * @date: 2022/8/27 16:08
     */
    queryNewsType() {
      newsTypeListImmune().then(res => {
        if (res.status) {
          this.newsTypeList = [];
          let num = res.data.length > 3 ? 3 : res.data.length;
          if (num > 0) {
            for (let i = 0; i < num; i++) {
              this.newsTypeList.push(res.data[i]);
            }
            this.activeIndex = this.$route.query.nt || this.newsTypeList[0].id + '';
            //
            this.selectNewsList(this.activeIndex);
            this.queryNews();
          }
        }
      })
    },
    /**
     * {点击新闻分类触发}
     * @param index
     * @author: 宋康
     * @date: 2022/8/27 16:20
     */
    selectNewsList(index) {
      if ('-1' !== index) {
        this.activeIndex = index;
        this._mergeUrlReplace(this.$route, {nt: index, top: '0'})
        this.queryNews();
      } else {
        // 更多新闻
        this.$router.push({
          path: "/news",
        });
      }
    },
    /**
     * {获取新闻}
     *
     * @author: 宋康
     * @date: 2022/8/27 16:44
     */
    queryNews() {
      let formInline = {
        keyword: "",
        typeId: this.activeIndex,
        startDate: "",
        endDate: "",
      }
      newListImmune(1, 5, formInline).then(res => {
        if (res.status) {
          this.newsData = res.data.records;
        }
      })
    },
    /**
     * {跳转新闻详情页}
     *
     * @author: 宋康
     * @date: 2022/8/27 17:09
     */
    toNewsDes(nid) {
      this.$router.push({
        path: "/news/NewsNational",
        query: {
          nid: nid,
          nt: this.activeIndex
        }
      });
    }
  },
  mounted() {
    this.queryNewsType();
  }
};
</script>

<style lang="scss" scoped>
.menu {
  width: 100%;
  color: #909399;
  border-bottom: 0 !important;
  display: flex;
  justify-content: space-around;
  background-color: transparent;

  .el-col {
    margin: 0 20px;

    .el-menu-item {
      height: 48px;
      text-align: center;
      line-height: 48px;
      border: 2px solid #c0c0c0 !important;
      border-radius: 4px;
      font-weight: 700;
    }

    .el-menu-item.is-active {
      color: #1276f2 !important;
      border: 2px solid #1276f2 !important;
    }
  }
}

.table {
  width: 95%;
  height: 322px;
  margin: 0 auto;
}

.table::-webkit-scrollbar {
  width: 0;
  display: none;
}

.title {
  max-width: 82%;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
  text-indent: 10px;
  cursor: pointer;

  .title-img {
    float: left;
  }
}

.time {
  width: 100%;
  float: left;
  text-align: center;
}
</style>